<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="$t('l_denglumima')" :isShow="true"></headerPcTow>

							<div class="conTow">
								<div class="textTow">{{$t('l_xiugaidenglumima')}}</div>
								<div class="item1Tow item2Tow">
									<div class="left2Tow">
										<i class="anticon1Tow">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 13.792 23" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
												</svg>
											</i>
										</i>
									</div>
									<el-input v-model="oldpass" :placeholder="$t('l_shurujiumima')" show-password
										class="pcInput" />
								</div>
								<div class="item1Tow item2Tow">
									<div class="left2Tow">
										<i class="anticon1Tow">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 13.792 23" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
												</svg>
											</i>
										</i>
									</div>
									<el-input v-model="input" :placeholder="$t('l_6-16')" show-password
										class="pcInput" />
								</div>
								<div class="item1Tow item2Tow">
									<div class="left2Tow">
										<i class="anticon1Tow">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 13.792 23" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
												</svg>
											</i>
										</i>
									</div>
									<el-input v-model="input1" :placeholder="$t('l_querenxinmima')" show-password
										class="pcInput" />
								</div>
								<div class="pc_btngroup" @click="submit">
									<div class="pc_btns">{{$t('l_queding')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_denglumima')"></navHeader>
				<div class="con">
					<div class="text1">{{$t('l_xiugaidenglumima')}}</div>
					<div class="item1 item2">
						<div class="left2">
							<i class="anticon1" style="margin-top: -4px;">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
									</svg>
								</i>
							</i>
						</div>
						<el-input v-model="oldpass" :placeholder="$t('l_shurujiumima')" show-password class="h5Input" />
					</div>
					<div class="item1 item2">
						<div class="left2">
							<i class="anticon1" style="margin-top: -4px;">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
									</svg>
								</i>
							</i>
						</div>
						<el-input v-model="input" :placeholder="$t('l_6-16')" show-password class="h5Input" />
					</div>
					<div class="item1 item2">
						<div class="left2">
							<i class="anticon1" style="margin-top: -4px;">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_mm--sprite"></use>
									</svg>
								</i>
							</i>
						</div>
						<el-input v-model="input1" :placeholder="$t('l_querenxinmima')" show-password class="h5Input" />
					</div>
					<div class="orkXHvtNM5R_5twq6l5I" @click="submit">
						<div class="baocun">{{$t('l_queding')}}</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				oldpass: '',
				value: '',
				mask: true,
				showKeyboard: false,

				zzc: false,
				step: 0,

				input: '',
				input1: '',
				navIndex: 0,
				navs: [{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_dtfl_dz_0',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_dtfl_qp_0',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_dtfl_by_0',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_dtfl_zr_0',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_dtfl_ty_0',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_dtfl_cp_0',
					},
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				]
			}
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			submit() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.changeLoginPass({
					old_password: this.oldpass,
					password: this.input,
					password_cp: this.input1,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(this.$t('l_caozuochenggong'));
						setTimeout(() => {
							this.$router.push('/mine/mine')
						}, 600)
					} else {
						this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style>
	.h5Input .el-input__inner {
		height: 0.5rem !important;
		border: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		color: #55657e !important;
	}

	.pcInput .el-input__inner {
		height: 34px !important;
		border: 0 !important;
		width: 80% !important;
		padding: 0 !important;
		color: #55657e !important;
		font-size: 15px !important;
		margin-left: 10px !important;
	}
</style>
<style scoped>
	* {
		box-sizing: border-box;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.con {
		width: 100%;
		padding: 0.4rem 0.2rem 0.2rem;
	}

	.conTow {
		width: 100%;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;
		margin-top: 20px;
		padding: 25px 30% 50px;
	}

	.text {
		font-size: .24rem;
		color: #ffffff;
		font-weight: 700;
		max-width: 2.6rem;
		text-align: left;
	}

	.textTow {
		font-size: 15px;
		color: #ffffff;
		font-weight: 700;
		text-align: left;
	}

	.Ou1aviPriFX421w97dGA {
		width: 100%;
		color: #ffffff;
		font-size: .22rem;
		height: 0.32rem;
		margin-bottom: 0.15rem;
		margin-top: 0.3rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.R1tVtJPfBJA944lSRyyP {
		font-size: .36rem;
	}

	.M2AXg2u2tA9h8un7RCbH {
		color: var(--theme-color-line);
	}

	.MOFLcj7nVRZHKLivuWpP {
		color: var(--theme-primary-color);
	}

	/deep/ .van-password-input {
		margin: 0;
	}

	/deep/ .van-password-input__security li {
		background-color: var(--theme-top-nav-bg);;
		color: #fff;
	}

	/deep/ .van-password-input__security i {
		background-color: #fff;
	}

	/deep/ .van-password-input__info {
		margin-top: 0.1rem;
		color: #ea4e3d;
		font-size: .18rem;
		height: 0.4rem;
		line-height: 1;
		margin-bottom: -0.4rem;
		text-align: left;
	}

	.more {
		width: 100%;
		text-align: right;
		font-size: .22rem;
		color: var(--theme-primary-color);
		margin-top: 0.3rem;
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-main-bg-color);
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.orkXHvtNM5R_5twq6l5ITow {
		align-items: center;
		background-color: var(--theme-main-bg-color);
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 50px;
		justify-content: space-between;
		width: 100%;
		margin-top: 30px;

	}

	.baocunTow {
		color: #ffffff;
		font-size: 14px;
		cursor: pointer;
		height: 35px;
		line-height: 35px;
		text-align: center;
		width: 100%;
		border-radius: 5px;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
	}

	.baocun {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		width: 100%;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem !important;
	}

	.zzctext {
		font-weight: 700;
		color: #ffffff;
		font-size: .3rem !important;
		line-height: 1.4;
		text-align: center;
	}

	.zzccon1 {
		margin-top: 0.4rem;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.zzccon1box {
		border-radius: 0.14rem;
		height: 0.7rem;
		padding: 0.12rem 0.05rem 0.12rem 0.2rem;
		width: 2.6rem;
		align-items: center;
		border: 0.01rem solid var(--theme-color-line);
		display: flex;
		justify-content: space-between;
	}

	.anticon {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		color: inherit;
		display: inline-block;
		font-style: normal;
		line-height: 0;
		text-align: center;
		text-transform: none;
		vertical-align: -0.125em;
	}

	.anticon i {
		display: inline-block;
		position: relative;
		width: 0.46rem;
		height: 0.46rem;
		background-image: url('../../assets/images/yh/img.png');
		background-position: 0rem -2.254rem;
		background-size: 4.67667rem 4.416rem;
	}

	.zzccon1box span {
		font-size: .22rem;
		width: 1.84rem;
		color: var(--theme-text-color);
		line-height: 1.2;
		text-align: center;
	}

	.zzctext2 {
		color: var(--theme-alt-neutral-2);
		margin-top: 0.4rem;
		font-size: .22rem;
		text-align: center;
	}

	.zzctext2 span {
		color: var(--theme-primary-color);
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.text1 {
		font-size: .24rem;
		margin-bottom: 0.4rem;
		margin-top: 0;
		color: #ffffff;
		font-weight: 700;
	}

	.item1 {
		line-height: 1.5;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-main-bg-color);
    border-color: var(--theme-color-line)!important;
		border: 1px solid;
		border-radius: 0.14rem;
		height: 0.7rem;
		margin-bottom: 0.3rem;
	}

	.item1Tow {
		/* line-height: 1.5; */
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-color: #293548 !important;
		border: 1px solid;
		border-radius: 5px;
		height: 40px;
		margin-top: 20px;
	}

	.anticon1 {
		height: 0.25rem;
		width: 0.25rem;
		color: var(--theme-color-line)!important;
		font-size: 12px;
	}

	.anticon1Tow {
		height: 20px;
		width: 20px;
		color: var(--theme-color-line)!important;
		font-size: 14px;
		margin-left: 10px;
		margin-top: 4px;
	}

	.el-input {
		flex: 1;
		border-left: 1px solid var(--theme-color-line)!important;
		padding-left: .2rem;
	}

	.left2 {
		width: 0.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2Tow {
		width: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2Tow svg {
		font-size: 15px;
	}

	.left2 svg {
		font-size: 15px;
	}

	.item2 .el-input {
		border-left: 0;
		padding-left: 0;
	}

	.item2 span {
		color: var(--theme-alt-neutral-2);
		font-size: .22rem;
		max-width: 1.8rem;
		margin-right: .2rem;
	}

	.item2Tow .el-input {
		border-left: 0;
		padding-left: 0;
	}

	.item2Tow span {
		color: var(--theme-alt-neutral-2);
		font-size: 15px;
		max-width: 20px;
		margin-right: 10px;
	}

	.pc_btngroup {
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
		padding-bottom: 47px;
		margin-top: 30px;
	}

	.pc_btns {
		font-size: 15px;
		height: 43px;
		line-height: 43px;
		white-space: normal;
		width: 143px;
		text-align: center;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
		border-radius: 7px;
	}
</style>